Add localization (i18n) support #15 by kumaradityaraj · Pull Request #46 · serverlessworkflow/editor

kumaradityaraj · 2026-03-25T07:47:31Z

Closes 15

Summary

This PR sets up internationalization (i18n) support for the project by introducing a shared @serverlessworkflow/i18n package and integrating it into the diagram editor.

Changes

Added a new workspace package @serverlessworkflow/i18n to centralize i18n configuration.
Configured i18next and react-i18next with default English resources.
Initialized i18n in the diagram editor so components can use useTranslation() without additional setup.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

kumaradityaraj · 2026-03-25T07:51:36Z

@fantonangeli Please review this PR. Thank you.

Copilot

Pull request overview

This PR introduces initial internationalization (i18n) scaffolding by adding a shared @serverlessworkflow/i18n workspace package and wiring i18n initialization/usage into the diagram editor so React components can call useTranslation().

Changes:

Added new @serverlessworkflow/i18n package with i18next + react-i18next configuration and English resources.
Initialized i18n in serverless-workflow-diagram-editor and demonstrated useTranslation() usage.
Updated workspace dependencies/lockfile to include the new package and i18n libraries.

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds lock entries for the new i18n package and i18next/react-i18next deps.
packages/serverless-workflow-diagram-editor/src/i18n.ts	Initializes i18next via shared `setupI18n`.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Imports i18n setup and renders a few translated strings via `useTranslation()`.
packages/serverless-workflow-diagram-editor/package.json	Adds dependencies for shared i18n package and i18n libraries.
packages/i18n/tsconfig.json	TypeScript build config for the new i18n package.
packages/i18n/src/types.d.ts	Adds react-i18next type augmentation for typed resources/namespace.
packages/i18n/src/resources.ts	Defines resources map and imports English JSON bundle.
packages/i18n/src/locales/en/common.json	English string bundle for the default namespace.
packages/i18n/src/index.ts	Exports i18n config/resources from the new package.
packages/i18n/src/config.ts	Implements `setupI18n()` using i18next + initReactI18next.
packages/i18n/package.json	Declares the new workspace package, scripts, and dependencies.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/i18n/package.json

packages/i18n/src/index.ts

packages/serverless-workflow-diagram-editor/package.json

packages/serverless-workflow-diagram-editor/src/i18n.ts

Copilot · 2026-03-25T07:55:06Z

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

      <button style={clickmeBtnStyle} onClick={() => alert("Hello from Diagram!")}>
        Click me!
      </button>


Now that i18n is wired in, the button label and alert message remain hardcoded strings. To align with the stated goal of moving UI text into i18n resources, consider replacing these literals with t(...) keys (and adding them to common.json).

Copilot · 2026-03-25T07:55:06Z

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

+      <div>
+        {t("welcome")} {t("start")} {t("setup")}{" "}
+      </div>


The new translated content rendered via t(...) isn’t currently asserted anywhere. Since this component already has a Vitest/RTL test, add a simple assertion that the expected English strings render (or that no raw keys render) to catch regressions in i18n initialization.

Copilot · 2026-03-25T07:55:06Z

packages/i18n/src/resources.ts

+import enCommon from "./locales/en/common.json";
+
+export const resources = {
+  en: {
+    common: enCommon,


Importing ./locales/en/common.json from TS has two build/publish blockers in the current setup: (1) tsc will fail unless resolveJsonModule is enabled in tsconfig, and (2) even if it compiles, tsc won’t copy JSON assets into dist, but the package only publishes dist, so the runtime import will break. Consider moving translations into a TS module, or add a build step to copy src/locales/** into dist (and ensure the TS config supports JSON imports).

Suggested change

import enCommon from "./locales/en/common.json";

export const resources = {

en: {

common: enCommon,

// NOTE: Contents of "./locales/en/common.json" have been moved into this

// TypeScript module to avoid relying on JSON imports that may not be

// supported by the TypeScript compiler configuration or build pipeline.

// TODO: Replace the placeholder object below with the actual contents of

// "./locales/en/common.json" to preserve all translations.

export const resources = {

en: {

common: {

// Translation keys previously defined in "./locales/en/common.json"

// should be inlined here as a plain object.

},

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 10 out of 12 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/serverless-workflow-diagram-editor/package.json

Copilot · 2026-03-25T08:18:26Z

packages/i18n/src/resources.ts

+import enCommon from "./locales/en/common.json";
+
+export const resources = {
+  en: {
+    common: enCommon,
+  },


resources.ts imports ./locales/en/common.json, but the package build (tsc) won't include/copy JSON assets into dist, and the package files field only publishes dist. This will either fail TypeScript compilation (unless resolveJsonModule is enabled) or fail at runtime when dist/resources.js tries to import a JSON file that doesn't exist. Consider moving resources to a .ts module, or update the build to copy src/locales/** into dist (and ensure TS can typecheck JSON imports).

packages/i18n/src/config.ts

packages/i18n/package.json

packages/serverless-workflow-diagram-editor/src/i18n.ts

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

fantonangeli

Thanks a lot @kumaradityaraj for this PR.
I also add some points here:

please write a short README file explaining how to use it and how to add languages to components

fantonangeli · 2026-03-25T16:31:56Z

packages/i18n/package.json

+    "build:prod": "pnpm run build"
+  },
+  "dependencies": {
+    "@serverlessworkflow/i18n": "workspace:*",


This is a circular dependency ⚠️

Suggested change

"@serverlessworkflow/i18n": "workspace:*",

fantonangeli · 2026-03-25T16:47:37Z

packages/i18n/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@serverlessworkflow/i18n",


I don't think we are interested on publishing this package on npm registry as it is an internal package

Suggested change

"name": "@serverlessworkflow/i18n",

"name": "@serverlessworkflow/i18n",

"private": true,

fantonangeli · 2026-03-25T16:47:49Z

packages/i18n/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@serverlessworkflow/i18n",
+  "version": "1.0.0",


Suggested change

"version": "1.0.0",

"version": "0.0.0",

fantonangeli · 2026-03-25T17:24:21Z

packages/i18n/tsconfig.json

+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "emitDeclarationOnly": false


This should not be necessary

Suggested change

"emitDeclarationOnly": false

fantonangeli · 2026-03-25T17:55:30Z

packages/i18n/package.json

+    "build": "pnpm clean && tsc -p tsconfig.json",
+    "build:prod": "pnpm run build"


Please follow the repository style packages/serverless-workflow-diagram-editor/package.json:

Suggested change

"build": "pnpm clean && tsc -p tsconfig.json",

"build:prod": "pnpm run build"

"build:dev": "pnpm clean && tsc -p tsconfig.json",

"build:prod": "pnpm build:dev"

fantonangeli · 2026-03-25T18:00:40Z

packages/i18n/package.json

+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {


Please add the lint, format, test commands.
For the tests there is a guide here: https://react.i18next.com/misc/testing

fantonangeli · 2026-03-25T18:04:11Z

packages/i18n/src/config.ts

+import { initReactI18next } from "react-i18next";
+import { resources, defaultNS } from "./resources";
+
+export async function setupI18n(instance: i18n) {


I would suggest to follow the official guide:
https://react.i18next.com/guides/quick-start#configure-i18next
It will result in less code and standard way

fantonangeli · 2026-03-25T18:10:06Z

packages/i18n/src/locales/en/common.json

These translations are related to packages/serverless-workflow-diagram-editor and should be there, if possible.
Wdyt @handreyrc ?

I agree, translations associated with the editor package should be inside the folder packages/serverless-workflow-diagram-editor as they are specific to that package

fantonangeli · 2026-03-25T18:29:22Z

packages/serverless-workflow-diagram-editor/package.json

  },
+  "dependencies": {
+    "@serverlessworkflow/i18n": "workspace:*",
+    "i18next": "catalog:",


I don't think this is needed

Suggested change

"i18next": "catalog:",

fantonangeli · 2026-03-25T18:37:12Z

packages/i18n/package.json

@lornakelly not in this PR and with low priority, maybe we should evaluate adding a script to verify the translation entries?

Yes, I will add this to our excel and we can discuss what it would include eg missing keys between language files etc. Agree, this is a separate issue from this PR though

lornakelly · 2026-03-26T10:26:10Z

@kumaradityaraj Let me know when you have addressed @fantonangeli comments and I will review again, thanks!

kumaradityaraj · 2026-03-26T10:30:08Z

@lornakelly Handrey suggested something similar to implement like this - I18nDictionariesProvider

So i am looking at it as this is more modular and easy to use

fantonangeli · 2026-03-26T13:29:30Z

@kumaradityaraj, maybe you can try with the official provider: https://react.i18next.com/latest/i18nextprovider ?

Implemented i18n basic setup

625ad89

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings March 25, 2026 07:47

Copilot started reviewing on behalf of kumaradityaraj March 25, 2026 07:47 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

kumaradityaraj added 2 commits March 25, 2026 13:36

Resolved copilots suggestions

a3ebcb6

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Resolved dependency issue

6f76d97

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings March 25, 2026 08:12

Copilot started reviewing on behalf of kumaradityaraj March 25, 2026 08:12 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

Resolved copilot reviews

001c00e

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

handreyrc requested review from fantonangeli and handreyrc March 25, 2026 14:28

fantonangeli suggested changes Mar 25, 2026

View reviewed changes

fantonangeli requested a review from lornakelly March 25, 2026 18:38

-import enCommon from "./locales/en/common.json";
-export const resources = {
-  en: {
-    common: enCommon,
+// NOTE: Contents of "./locales/en/common.json" have been moved into this
+// TypeScript module to avoid relying on JSON imports that may not be
+// supported by the TypeScript compiler configuration or build pipeline.
+// TODO: Replace the placeholder object below with the actual contents of
+// "./locales/en/common.json" to preserve all translations.
+export const resources = {
+  en: {
+    common: {
+      // Translation keys previously defined in "./locales/en/common.json"
+      // should be inlined here as a plain object.
+    },

	"name": "@serverlessworkflow/i18n",
	"name": "@serverlessworkflow/i18n",
	"private": true,

		"build": "pnpm clean && tsc -p tsconfig.json",
		"build:prod": "pnpm run build"

Conversation

kumaradityaraj commented Mar 25, 2026

Summary

Changes

Uh oh!

kumaradityaraj commented Mar 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lornakelly commented Mar 26, 2026

Uh oh!

kumaradityaraj commented Mar 26, 2026

Uh oh!

fantonangeli commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants